<template  xmlns="http://www.w3.org/1999/html">
    <div class="app-container">
      <!-- 查询条件区域-->
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
       <el-form-item label="任务编码" prop="task_num">
          <el-input
            v-model="queryParams.task_num"
            placeholder="请输入任务编码"
            clearable
            @keyup.enter.native="handleQuery"
            size="small"
          />
        </el-form-item>
        <el-form-item label="任务名称" prop="task_name">
          <el-input
            v-model="queryParams.task_name"
            placeholder="请输入任务名称"
            clearable
            @keyup.enter.native="handleQuery"
            size="small"
          />
        </el-form-item>
        <el-form-item>
          <el-button style="margin-left:20px;" type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
       <!--增删改查按钮区域-->
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['robot:patroltask:add']"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
              type="success"
              plain
              icon="el-icon-folder-checked"
              size="mini"
              :disabled="multiple"
              @click="handleAuto"
              v-hasPermi="['robot:patroltask:add']"
          >设置自动</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
              type="success"
              plain
              icon="el-icon-folder-delete"
              size="mini"
              :disabled="multiple"
              @click="handleUAuto"
              v-hasPermi="['robot:patroltask:add']"
          >取消自动</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['robot:patroltask:remove']"
          >删除</el-button>
        </el-col>
      </el-row>
       <!-- 数据列表区域-->
      <el-table v-loading="loading" :data="patroltaskList" @selection-change="handleSelectionChange" :cell-style="{borderColor:'rgb(1 5 43)'}" :header-cell-style="{borderColor: 'rgb(1 5 43)'}" >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="自动任务" align="center" prop="is_auto" >
          <template slot-scope="scope">
            <el-tag  v-if="scope.row.is_auto==1">是</el-tag>
            <el-tag  v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="任务编码"
          align="center"
          prop="task_num"
          :show-overflow-tooltip="true"
          width="110"
        />
        <el-table-column label="任务名称" align="center" prop="task_name"/>
        <el-table-column label="执行时间(H)" align="center" prop="execution_time" >
          <template slot-scope="scope">
            <el-tag>{{scope.row.execution_time}}H</el-tag>
          </template>
        </el-table-column>
<!--        <el-table-column label="停留时间(s)" align="center" prop="residence_time" >
          <template slot-scope="scope">
            <span>≈{{scope.row.residence_time*10}}s</span>
          </template>
        </el-table-column>-->
        <el-table-column label="巡检视频" align="center" prop="inspect_type" >
          <template slot-scope="scope">
            <span  v-if="scope.row.inspect_type==0">连续</span>
            <span  v-else>定点</span>
          </template>
        </el-table-column>
<!--        <el-table-column label="录像时长" align="center" prop="videotape_time" >
          <template slot-scope="scope">
            <span v-if="scope.row.inspect_type==1">≈{{scope.row.residence_time*10}}s</span>
            <span v-else>≈{{scope.row.videotape_time*10}}s</span>
          </template>
        </el-table-column>-->
        <el-table-column label="速度(r/min)" align="center" prop="speed">
          <template slot-scope="scope">
            <span>{{scope.row.speed}}r/min</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="task_type">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.task_state==0">待执行</el-tag>
            <el-tag  v-else>今已执行</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="creater_time"  width="170">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.creater_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="text"
                icon="el-icon-s-operation"
                @click="handleRestore(scope.row)"
                v-hasPermi="['robot:patrolpoint:edit']"
            >恢复任务</el-button>
             <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['robot:patrolpoint:remove']"
            >删除</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleTaskPoint(scope.row)"
              v-hasPermi="['system:patrolpoint:query']"
            >巡检点详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--列表分页区域-->
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList" style="background:rgb(1 5 43);"
      />
      <!-- 添加或修改对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="630px" @close="handleCancle" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="任务名称" prop="task_name">
                <el-input v-model="form.task_name" placeholder="请输入任务名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
             <el-form-item label="执行时间" prop="execution_time">
               <el-select v-model="form.execution_time" placeholder="请选择执行时间(小时)" @change="getOptionszxsj" >
                 <el-option
                   v-for="sj in zxsj"
                   :key="sj"
                   :label="sj"
                   :value="sj"
                 ></el-option>
               </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="巡检视频" prop="inspect_type">
                <el-select v-model="form.inspect_type" placeholder="请选巡检视频类型"  @change="getOptionsplx" >
                  <el-option
                      v-for="item in inspectype"
                      :key="item.inspect_type"
                      :label="item.inspect_type_name"
                      :value="item.inspect_type"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="巡检速度" prop="speed">
                <el-select v-model="form.speed" placeholder="请选择机器人速度">
                  <el-option
                      v-for="sp in speeds"
                      :key="sp"
                      :label="sp"
                      :value="sp"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="停留时间" id="tlsj" prop="residence_time">
                <el-input id="residencetime" v-model="form.residence_time" placeholder="请输入停留时间1x10(秒)" maxlength="1" show-word-limit  clearable/>
              </el-form-item>
            </el-col>
<!--            <el-col :span="12">
              <el-form-item  prop="videotape_time" id="lxsc" style="display: none">
                <span slot="label">
                  <span style="color: red">* </span><span>录像时长</span>
                </span>
                <el-input id="videotapetime" v-model="form.videotape_time" maxlength="2" show-word-limit  placeholder="请输入录像时长1x10(秒)" clearable/>
              </el-form-item>
            </el-col>-->
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容(0-255)"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
             <el-form-item label="巡检点设置" style="width: 50%;" />
            <!--  巡检点设置数据列表区域-->
            <el-table class="tabled" id="xjdsz"  v-loading="loading1" ref="mutipleTable" :data="patrolpointList" @selection-change="handleSelectionChangePatrolPoint">
              <el-table-column type="selection" width="55" align="center" />
            <!--  <el-table-column label="序号" type="index" align="center" prop="id" width="100" />-->
              <el-table-column label="巡检点编码" align="center" prop="position_num" :show-overflow-tooltip="true" width="100"/>
              <el-table-column label="池子编号" align="center" prop="pond_num" :show-overflow-tooltip="true" width="100"/>
              <el-table-column label="巡检点名称" align="center" prop="position_name"/>
              <el-table-column label="距离起点距离(m)" align="center" prop="position_dist" width="200" />
            </el-table>
           </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm" id="patrolid">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
     <!--点位详情对话框 -->
    <el-dialog :title="titlepoint" :visible.sync="open1" width="600px">
      <el-form ref="form1" :model="form" :rules="rules" label-width="80px" >
        <el-row>
          <!-- 巡检点设置数据列表区域-->
          <el-table  ref="mutipleTable" :data="patroltaskpointList" :cell-style="{borderColor:'rgb(1 5 43)'}" :header-cell-style="{borderColor: 'rgb(1 5 43)'}">
            <!-- <el-table-column label="序号" type="index" align="center" prop="id" width="100" />-->
            <el-table-column label="巡检点编码" align="center" prop="position_num" :show-overflow-tooltip="true"/>
            <el-table-column label="巡检点名称" align="center" prop="position_name"/>
            <el-table-column label="距离起点距离(m)" align="center" prop="position_dist" width="200" />
          </el-table>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel1">取 消</el-button>
      </div>
    </el-dialog>
    </div>
  </template>
  <script>
  import {
    addPatrolTask, AutoPatrolTask,
    delPatrolTask,
    getPatrolTask,
    getPatrolTaskPoint,
    getPatrolTaskPoints,
    listPatrolTask,
    listPatrolTasks, restoreTask, UAutoPatrolTask,
    updatePatrolTask
  } from "@/api/nssc/patroltask/patroltask";
  import {listProcessBody} from "@/api/nssc/processbody/processbody";
  import $ from "jquery";
  import "@/assets/styles/robt-bg.css";
  export default {
   /* dicts: ['sys_task_type'],*/
    data() {
      return {
        execution_time:null, //日期选择
        pickerOption: {
          disabledDate: time => {
            const dateVal = new Date(this.execution_time).getTime();
            if (dateVal) {
              return time.getTime() > dateVal + 1;
            }
          }
        },
        // 遮罩层
        loading: true,
        // 遮罩层
        loading1: true,
        // 选中数组
        ids: [],
        task_names:[],
        // 选中巡检点数组
        point_ids: [],
        timer:null,//定时器
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        //任务列表
        typeList: [],
        //机器人列表
        robotList:[],
        // 添加或修改对话框---站点表格数据
        siteList: [],
        // 巡检任务表格数据
        patroltaskList: [],
        //工艺体表格数据
        processbodyList:[],
        // 巡检点表格数据
        patrolpointList: [],
        zxsj:['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
        speeds:['1000','2000','3000'],
        //巡检类型
        inspectype: [
          {inspect_type:1,inspect_type_name:"定点"},
          {inspect_type:0,inspect_type_name:"连续"},
          {inspect_type:2,inspect_type_name:"信号"}
        ],
        //巡检任务巡检点表格数据
        patroltaskpointList:[],
        // 弹出层标题
        title: "",
        titlepoint: "",
        // 是否显示弹出层
        open: false,
        // 是否显示弹出层
        open1: false,
        videotape_time: undefined,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 7,
          task_name: undefined,
          task_num: undefined,
          robot_name: undefined,
          task_type: undefined,
          execution_time:undefined,
          residence_time:undefined,
          create_times: [],
        },
        // 表单参数
        form: {
          inspect_type:undefined,
          point_ids:undefined
        },
        // 表单参数
        form1: {},
        // 表单校验
        rules: {
          task_name: [
            { required: true, message: "任务名称不能为空", trigger: "blur" }
          ] ,
          task_type: [
            { required: true, message: "任务类型不能为空", trigger: "blur" }
          ],
          execution_time: [
            { required: true, message: "任务执行小时不能为空"}
          ],
          inspect_type: [
            { required: true, message: "巡检视频类型不能为空"}
          ],
          speed:[
            { required: true, message: "速度不能为空"}
          ]
        }
      };
    },
    created() {
      this.getList();
      this.timer = setInterval(()=>{
        this.getList(); //刷新站点列表
      },10000);//10秒
    },
    beforeDestroy() {
      //清除定时器
      if(this.timer) {
        clearInterval(this.timer); //关闭
      }
    },
    methods: {
      //日期格式化
      dealWithTime(date) {
        let Y = date.getFullYear()
        let M = date.getMonth() + 1 - 0 >= 10 ? Number(date.getMonth()) + 1 : '0' + (Number(date.getMonth()) + 1)
        let D = date.getDate() > 10 ? date.getDate():"0"+date.getDate();
        return Y + '-' + M + '-' + D
      },
      /** 恢复任务按钮操作 */
      handleRestore(row) {
        if(typeof row.creater_time !="undefined" && row.creater_time!=null) {
          debugger
          const  cjsj = row.creater_time.substring(0,10);//任务创建时间
          const  dqsj = this.dealWithTime(new Date());//当前时间
          if(cjsj===dqsj) {
            this.$modal.msg("请明日操作！");
            return false;
          } else {
            const ids = row.id || this.ids;
            const task_names =row.task_name || this.task_names
            this.$modal.confirm('是否确认恢复名称为"' + task_names + '"的任务项？').then(function() {
              return restoreTask(ids);
            }).then(() => {
              this.getList();
              this.$modal.msgSuccess("恢复任务成功");
            }).catch(() => {});
          }
        }
      },
      /**自动任务按钮操作 */
      handleAuto(row) {
        const ids = row.id || this.ids;
        const task_names =row.task_name || this.task_names
        this.$modal.confirm('设置自动任务 "' + task_names + '" ？').then(function() {
          return AutoPatrolTask(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("设置成功");
        }).catch(() => {});
      },
      /**取消自动任务按钮操作 */
      handleUAuto(row) {
        const ids = row.id || this.ids;
        const task_names =row.task_name || this.task_names
        this.$modal.confirm('取消自动任务 "' + task_names + '" ？').then(function() {
          return UAutoPatrolTask(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("取消成功");
        }).catch(() => {});
      },
      handleChange() {
        // 通过正则表达式判断输入是否符合要求
        if (/^(0|[1-9][0-9]*)$/.test(this.value)) {
          // 转换为整数并限制范围为1-100
          let num = parseInt(this.value)
          if (num < 1) {
            num = 1
          } else if (num > 4) {
            num = 4
          }
          this.value = num.toString()
        } else {
          // 不符合要求则清空输入框
          this.value = ''
        }
      },
      //自定义对话框关闭方法
      handleCancle () {
        $("#patrolid").css("display","");
        this.form.execution_time = undefined;
        this.queryParams.execution_time = undefined;
        this.robotList=[],//机器人列表
        this.processbodyList=[];
        this.$refs.form.resetFields()
        this.dialogVisible = false
      },
      //巡检视频定点连续
      getOptionsplx(inspectype) {
        if(inspectype == 1) {//定点
           $("#xjdsz").css("display","");//巡检点列表
           $("#tlsj").css("display","");//录像时间---定点视频
        }else{
           $("#xjdsz").css("display","none");
           $("#tlsj").css("display","none");
        }
        $("#videotapetime").val(null);
        $("#residencetime").val(null);
      },
      //根据机器人id、执行时间查询是否有关联任务
      getOptionszxsj(execution_time) {
        this.queryParams.execution_time = execution_time;//设置站点id条件，查询工艺体
        listPatrolTasks(this.queryParams).then(response => {
          if(typeof(response)!="undefined" && response != null && response.rows.length>0) {
            $("#patrolid").css("display","none");
            this.$modal.confirm1('当前执行时间任务已创建！');
          }else {
            $("#patrolid").css("display","");
          }
        });
      },

      /*工艺体查询机器人列表*/
      getOptionsgyt(id){
        this.queryParams.process_body_id=id;//设置站点id条件，查询工艺体
        this.getrobotList();
      },

     /** 站点名称查询工艺体列表*/
      getOptions(id){
        this.queryParams.site_id=id;//设置站点id条件，查询工艺体
        this.getprocessbodyList();
      },
      /** 查询工艺体列表 */
      getprocessbodyList() {
        listProcessBody(this.queryParams).then(response => {
          this.processbodyList=[];
          this.processbodyList = response.rows;
        });
      },

      /** 查询巡检任务列表 */
      getList() {
        this.loading = true;
        listPatrolTask(this.queryParams).then(response => {
          this.patroltaskList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          point_name: undefined,
          point_num:undefined,
          robot_name:undefined
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams.create_times= [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.task_names = selection.map(item => item.task_name)
        this.single = selection.length!=1
        this.multiple = !selection.length
      },
      // 多选框选中点位数据
      handleSelectionChangePatrolPoint(selection) {
        this.point_ids = selection.map(item => item.id)
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.patrolpointList=[];
        this.reset();
        this.open = true;
        this.title = "新增任务";
        this.getpoint();
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getPatrolTask(id).then(response => {
          //反显的时候用，手动调用 start
          this.getOptions(response.data.site_id);
          this.getOptionsgyt(response.data.process_body_id);
          //end
          this.form = response.data;
          this.open = true;
          this.title = "修改任务";
        });
      },
      //该机器人所有的巡检点
      getpoint(){
        this.loading1 = true;
        getPatrolTaskPoints().then(response => {
          this.patrolpointList = response.list;
          this.loading1 = false;
        });
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.point_ids=this.point_ids;
            if (this.form.id != undefined) {
              updatePatrolTask(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              //连续视频
              if(typeof this.form.inspect_type == undefined){
                  this.$modal.confirm1('视频类型为空');
                  return false;
              }
              ///////定点视频/////////////
              if(this.form.inspect_type != undefined && this.form.inspect_type ==1){
                if(this.form.point_ids == undefined || this.form.point_ids == ""){
                  this.$modal.confirm1('请在该任务下添加巡检点！');
                  return false;
                }
                //停留时间
                let residencetime = $("#residencetime").val();
                if(residencetime == undefined || residencetime == null || residencetime == "") {
                  this.$modal.confirm1('停留时间为空');
                  return false;
                }
              }
              addPatrolTask(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        const task_names =row.task_name || this.task_names
        this.$modal.confirm('是否确认删除任务名称为"' + task_names + '"的数据项？').then(function() {
        // this.$modal.confirm('是否确认删除选中的数据项？').then(function() {
          return delPatrolTask(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 点位详情按钮操作 */
      handleTaskPoint(row) {
        const id = row.id || this.ids
        console.log("点位详情按钮操作"+id)
        getPatrolTaskPoint(id).then(response => {
          this.patroltaskpointList = response.rows;
          this.form1 = this.patroltaskpointList;
          this.open1 = true;
          this.titlepoint = "巡检点详细";
        });
      },
      // 取消按钮
      cancel1() {
        this.open1 = false;
        this.reset();
      },
    }
  };
  </script>
  <style rel="stylesheet/scss" lang="scss">
  /**列表添加垂直隐藏滚动条**/
  .tabled{
  height: 550px;
  overflow: hidden;
  overflow-y: scroll;
  }
  .tabled::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  }
  </style>
